<!-- 
 自定义事件
 典型用于子传父
 -->
<template>
  <div class="father">
    <h3>父组件</h3>
		<button @click="test1">点我</button>
		<button @click="test2(123, $event)">点我</button>
    <h4 v-show="toy">子给的玩具: {{ toy }}</h4>
		<!--给子组件 Child 绑定事件 
			send-toy 事件名; 
			saveToy 事件回调; -->
		<Child @send-toy="saveToy"/>
  </div>
</template>

<script setup lang="ts" name="Father">
import Child from './Child.vue'
import { ref } from "vue";

// 数据
let toy = ref('') 

// 用于保存传递过来的玩具
function saveToy(value:string, event:Event) {
	console.log('saveToy', value, event)
	toy.value = value
}
function test1(e: Event) {
	console.log(e)
}
function test2(a:number, event:Event) {
	console.log(event)
}
</script>

<style scoped>
	.father{
		background-color:rgb(165, 164, 164);
		padding: 20px;
    border-radius: 10px;
	}
	.father button{
		margin-right: 5px;
	}
</style>